<template>
  <view
    v-if="list.length > 0"
    class="notice-box flex align-center"
  >
    <u-icon
      name="volume"
      size="20"
    ></u-icon>
    <swiper
      :vertical="true"
      circular
      :autoplay="true"
      class="u-notice__swiper"
    >
      <swiper-item
        v-for="item in list"
        :key="item.id"
      >
        <view class="flex align-center justify-sb">
          <view class="flex align-center">
            <u--image
              :src="item.petAvatar"
              width="32rpx"
              class="user-avatar"
              height="32rpx"
              shape="circle"
            ></u--image>
            <text class="f-weight">{{ item.petNickname.slice(0, 6) }}</text>
            <text>被{{ item.nickName }}免费领养去新家啦！</text>
          </view>
          <text>{{ item.passTime }}</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getNoticeList } from '@/api/pet-core.js';
import { mapGetters } from 'vuex';
export default {
  name: 'homeNotice',
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    ...mapGetters(['token']),
  },
  watch: {
    token(val, oldVal) {
      if (val) {
        this.getList();
      }
    },
  },
  methods: {
    async getList() {
      try {
        const { data } = await getNoticeList();
        this.list = data;
      } catch (e) {
        throw new Error(e);
      }
    },
  },
};
</script>

<style lang="scss">
.notice-box {
  height: 72rpx;
  background-image: linear-gradient(90deg, #8ff88a 0%, #56ee52 100%);
  border-radius: 8px;
  padding: 0 24rpx 0 12rpx;
  .user-avatar {
    margin: 0 8rpx;
  }
  .u-notice__swiper {
    height: 40rpx;
  }
}
</style>
